<!-- 合同详情 -->
<template>
	<view>
		<u-sticky>
			<u-tabs
				class="tabs"
				:list="tabsList"
				@click="onTabClick"
				:scrollable="true" style="padding: 0 24rpx;background: #FFF;z-index:22;position: sticky;top: 0px;"
				:activeStyle="{color:'#171717', fontSize: '14px'}"
				:inactiveStyle="{color:'#C6C6C6', fontSize: '14px'}"
				:itemStyle="{ whiteSpace:'nowrap',height: '44px' }"
				lineColor="#1E6FFF"
			></u-tabs>
		</u-sticky>
		<view class="task_lists" :style="{ paddingBottom: tabvalue == '待办'?'130rpx':'0' }">
			<collapse name="基本信息" id="outside1" :maxHeight="maxHeight">
				<view class="listdefault" :id="uId">
					<view class="action" v-for="(item,key) in basicInfo" :key="key">
						<view class="list1">{{ key }}</view>
						<view class="list2">{{ detailData[item] }}</view>
					</view>
					
					<!-- 迭代16.7增加为费用类型字段 -->
					<view class="action" v-if="detailData.htlx ==2">
						<view class="list1">费用类型</view>
						<view class="list2">{{ detailData.feeType_dictText }}</view>
					</view>
					
					<view class="action" v-if="detailData.htlx ==2">
						<view class="list1">是否采购类</view>
						<view class="list2">{{ detailData.isCategoryType_dictText }}</view>
					</view>
					<!-- '合同类型': 'htlx_dictText', -->
					<!-- '项目名称': 'xmmc_dictText', -->
					<view class="action">
						<view class="list1">合同类型</view>
						<view class="list2">{{ detailData.htlx_dictText }}</view>
					</view>
					<view class="action">
						<view class="list1">项目名称</view>
						<view class="list2" style="color: #1E6FFF;" @click="onClickProjectName(detailData)">{{ detailData.xmmc_dictText }}</view>
					</view>
					<view class="action" v-if="detailData.isCategoryType ==1">
						<view class="list1">采购类型</view>
						<view class="list2">{{ detailData.provisionType_dictText }}</view>
					</view>
					<view class="action" v-if="detailData.isCategoryType ==1 && detailData.provisionType ==1">
						<view class="list1">关联单据</view>
						<view class="list2">{{ detailData.calibrationId_dictText }}</view>
					</view>
					<view class="action" v-if="detailData.isCategoryType ==1 && detailData.provisionType ==2">
						<view class="list1">关联单据</view>
						<view class="list2">{{ detailData.purchaseApplyId_dictText }}</view>
					</view>
					<view class="action" v-if="detailData.isCategoryType ==1 && detailData.provisionType ==3">
						<view class="list1">关联单据</view>
						<view class="list2">{{ detailData.invitationId_dictText }}</view>
					</view>
					<view class="action" v-if="detailData.htlx == 2 && detailData.feeType=='2'">
						<view class="list1">费用所属团队</view>
						<view class="list2">{{ detailData.jytd_dictText }}</view>
					</view>
					<view class="action" v-else>
						<view class="list1">经营团队</view>
						<view class="list2">{{ detailData.jytd_dictText }}</view>
					</view>
					<view class="action">
						<view class="list1">业绩归属年度</view>
						<view class="list2">{{ detailData.yjgsnd }}</view>
					</view>
					<view class="action">
						<view class="list1">签订单位</view>
						<view class="list2">{{ detailData.qddw_dictText }}</view>
					</view>
					<view class="action">
						<view class="list1">项目承接人</view>
						<view class="list2">{{ detailData.xmcjr_dictText }}</view>
					</view>
					<view class="action">
						<view class="list1">业主单位</view>
						<view class="list2">{{ detailData.yzdw_dictText }}</view>
					</view>
					<view class="action">
						<view class="list1">联系人</view>
						<view class="list2">{{ detailData.lxr_dictText }}</view>
					</view>
					<view class="action">
						<view class="list1">联系方式</view>
						<view class="list2">{{ detailData.lxfs }}</view>
					</view>
					<view class="action">
						<view class="list1">签订日期</view>
						<view class="list2">{{ detailData.qdrq }}</view>
					</view>
					<view class="action">
						<view class="list1">履约保证金(元)</view>
						<view class="list2">{{ detailData.bail }}</view>
					</view>
					<view class="action">
						<view class="list1">是否用印</view>
						<view class="list2">{{ detailData.sfyz_dictText }}</view>
					</view>
					<template v-if="detailData.sfyz == 1">
						<view class="action">
							<view class="list1">印章类型</view>
							<view class="list2">{{ detailData.yzlx_dictText }}</view>
						</view>
						<view class="action">
							<view class="list1">用印份数</view>
							<view class="list2">{{ detailData.yyfs }}</view>
						</view>
					</template>
					<view class="action">
						<view class="list1">是否存档</view>
						<view class="list2">{{ detailData.sfcd_dictText }}</view>
					</view>
					<view class="action" v-if="detailData.sfcd==='1'">
						<view class="list1">合同存档份数</view>
						<view class="list2">{{ detailData.cdfs }}</view>
					</view>
					<view class="action" v-if="detailData.htlx !=1">
						<view class="list1">关联收款合同</view>
						<view class="list2">{{ detailData.glskht_dictText }}</view>
					</view>
					<template v-if="detailData.glskht == '1'">
						<view class="action">
							<view class="list1">收款合同名称</view>
							<view class="list2">{{ detailData.skhtmc_dictText }}</view>
						</view>
						<!-- <view class="action">
							<view class="list1">甲方</view>
							<view class="list2">{{ detailData.jf_dictText }}</view>
						</view>
						<view class="action">
							<view class="list1">乙方</view>
							<view class="list2">{{ detailData.yf_dictText }}</view>
						</view> -->
						<view class="action">
							<view class="list1">收款合同额(元)</view>
							<view class="list2">{{ detailData.skhte }}</view>
						</view>
						<view class="action">
							<view class="list1">收款合同额大写</view>
							<view class="list2">{{ detailData.skhtedx }}</view>
						</view>
					</template>
					<view class="action">
						<view class="list1">本次合同额(元)</view>
						<view class="list2">{{ detailData.bchte }}</view>
					</view>
					<view class="action">
						<view class="list1">本次合同额大写</view>
						<view class="list2">{{ detailData.bchtedx }}</view>
					</view>
					<view class="action">
						<view class="list1">服务期限</view>
						<view class="list2">{{ !detailData.fwqx || !detailData.fwqxEnd?'--':detailData.fwqx+'~'+detailData.fwqxEnd }}</view>
					</view>
					
					<view class="action">
						<view class="list1">备注</view>
						<view class="list2">{{ detailData.bz }}</view>
					</view><view class="action">
						<view class="list1">邮寄信息</view>
						<view class="list2">{{ detailData.yjxx }}</view>
					</view>
				</view>
			</collapse>
			<template  >
				<action-collapse :name="detailData.htlx==1?'委托方信息':'受托方信息'" :childFields="childFields3" id="outside2" :dataSource="childSource2"></action-collapse>
			</template>
			<template >
				<action-collapse :name="detailData.htlx==2?'委托方信息':'受托方信息'" :childFields="childFields2" id="outside3" :dataSource="childSource3"></action-collapse>
			</template>
			<view v-show="detailData.htlx==1">
				<action-collapse name="任务信息" :childFields="childFields4" id="outside4" :dataSource="childSource4"></action-collapse>
			</view>
			<action-collapse name="收付款计划" :childFields="childFields5" id="outside5" :dataSource="childSource5"></action-collapse>
			<action-collapse name="申请记录" :childFields="childFields6" id="outside6" :dataSource="childSource6">
				<span slot="xmmc_dictText" slot-scope="xmmc" style="color: #1E6FFF;" @click="onClickProjectName(xmmc.record)">{{xmmc.text}}</span>
			</action-collapse>
			<default-list name="合同原件" v-if="!detailData.sfyz || detailData.sfyz != 1">
				<file-list :fileList="detailData.masterCopy"></file-list>
			</default-list>
			<default-list name="相关附件">
				<file-list :fileList="detailData.xgfj"></file-list>
			</default-list>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>
<script>
	import { filterMultiDictText, initDictOptions } from '@/utils/JDictSelectUtil.js'
	import http from '@/utils/request/index.js'
	import actionCollapse from '@/pages/synergy/components/actionCollapse.vue'
	import detailInformationList from '@/pages/synergy/components/detailInformationList.vue'
	import fileList from '@/pages/synergy/components/fileList.vue'
	import collapse from '@/pages/synergy/components/collapse.vue'
	import defaultList from '@/pages/synergy/components/defaultList.vue'
	import flowList from '@/pages/synergy/components/flowList.vue'
	import {
		queryByIdContractManager, // 根据id查询信息
		getProcessTaskTransInfo, // 查询流程流转信息
		getProcessHistoryList, // 查询流程图信息
		getProcessHistoryTaskList, // 查询历史流程图信息
		getNodePositionInfo, // 查询坐标信息数据
		rejectProcess, // 退回
		processComplete ,// 提交完成
		getChildrenListEntrust, // 委托方信息子表
		getChildrenListTrustee, // 受托方信息子表
		getChildrenListClass, // 任务信息子表
		getChildrenListPlan, // 收款计划子表
	} from '@/api/index.js'
	import {
		BASE_URL
	} from '@/utils/baseUrl.js'
	export default {
		data() {
			return {
				filterMultiDictText: '',
				initDictOptions: '',
				dictOptions: {},
				tabsList: [
					{ name: '基本信息',id: 'outside1' },
					{ name: '任务信息',id: 'outside4' },
					{ name: '收付款计划',id: 'outside5' },
					{ name: '申请记录',id: 'outside6' },
				],
				detailData: {}, // 详情数据
				basicInfo: { // 主表信息字段
					'单据编号': 'htbh',
					'申请时间': 'createTime',
					'申请人': 'proposer_dictText',
					'申请部门': 'proposerDeptId_dictText',
					'合同名称': 'htmc',
					// '是否采购类': 'isCategoryType_dictText',
					// '合同类型': 'htlx_dictText',
					// '项目名称': 'xmmc_dictText',
					
					// '是否涉及多方信息': 'involveMultiple_dictText',
					// '备注': 'bz',
					// '邮寄信息': 'yjxx',
				},
				childFields2: {
					'名称': 'gsdaId_dictText',
					'是否为付款单位': 'isFk_dictText',
				}, // 子表字段
				childFields3: {
					'名称': 'khdaId_dictText',
					'是否为收款单位': 'isSk_dictText',
				}, // 子表字段
				childFields4: {
					'业务编码': 'ywfl',
					'业务名称': 'ywmc',
					'合同占比(%)': 'htzb',
					'分配合同额(元)': 'fphte',
					'生产团队': 'sctd_dictText',
					'团队负责人': 'tdfzr_dictText',
				}, // 任务信息子表字段
				childFields5: {
					'款项名称': 'kxmc',
					'金额(元)': 'je',
					'预计款项日期': 'kxrq',
					'款项节点说明': 'kxjdsm',
				}, // 收付款计划子表字段
				childFields6: {
					'单据编号': 'htbh',
					'合同名称': 'htmc',
					'项目编号': 'xmbh',
					'项目名称': 'xmmc_dictText',
					'业绩归属年度': 'yjgsnd_dictText',
					'签订日期': 'qdrq',
					'合同类型': 'htlx_dictText',
					'本次合同额(元)': 'bchte',
					'签订单位': 'qddw_dictText',
					'业主单位': 'yzdw_dictText',
					'经营团队': 'jytd_dictText',
					'状态': 'bpmStatus_dictText',
				}, // 收付款计划子表字段
				resultList: [], // 流程图数据
				nodePositionInfo: {}, // 坐标信息
				processInstanceId: '',
				scrollTop: 0, // 滚动顶部距离
				model: {}, // 处理单据表信息
				resultObj: {}, // 流程图流转信息
				nodeObj: {}, // 流程节点信息
				tabvalue: '', // 协同首页tabs name
				contactList: [], // 合同附件信息
				childSource2: [], // 委托方信息子表数据
				childSource3: [], // 受托方信息子表数据
				childSource4: [], // 任务信息子表数据
				childSource5: [], // 收付款计划子表数据
				childSource6: [], // 申请记录子表数据
				isClick: false,
				maxHeight: 0,
				uId: uni.$u.guid(),
				id: ''
			}
		},
		components: {
			actionCollapse,
			detailInformationList,
			fileList,
			collapse,
			defaultList,
			flowList
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad(options) {
			this.id = options.id || ''
			this.loadData(this.id)
		},
		created() {
			this.initDictConfig()
		},
		methods: {
			async initDictConfig() {
				// 是否用印
			  initDictOptions('yn').then((res) => {
			    if (res.success) {
			      this.$set(this.dictOptions, 'sfyz', res.result)
			    }
			  })
				// 印章类型
			  initDictOptions('yzlx_type').then((res) => {
			    if (res.success) {
			      this.$set(this.dictOptions, 'yzlx', res.result)
			    }
			  })
			},
			// 查询详情
			async loadData(id){
				http.get('/api/erp/omc/contractmanager/erpOmcContractManagerFinal/queryById', { id }).then(async res => {
					if(res.success){
						this.detailData = await res.result
						this.getApplicationRecord(res.result.htbh) // 获取申请记录
						if (res.result.htlx == 1) {
							// 收款单
							this.tabsList = [
								{ name: '基本信息',id: 'outside1' },
								{ name: '委托方(合同甲方)信息',id: 'outside2' }, 
								{ name: '受托方(合同乙方)信息',id: 'outside3' },
								{ name: '任务信息',id: 'outside4' },
								{ name: '收付款计划',id: 'outside5' },
								{ name: '申请记录',id: 'outside6' },
							]
							this.childFields2 = {
								'名称': 'gsdaId_dictText',
								'是否为收款单位': 'isSk_dictText',
							}
							this.childFields3 = {
								'名称': 'khdaId_dictText',
								'是否为付款单位': 'isFk_dictText',
							}
							this.getChildren(getChildrenListTrustee,'childSource3',res.result.id) // 受托方信息子表
							this.getChildren(getChildrenListEntrust,'childSource2',res.result.id) // 委托方信息子表
						} else{
							// 付款单
							this.tabsList = [
								{ name: '基本信息',id: 'outside1' },
								{ name: '受托方(合同乙方)信息',id: 'outside2' }, 
								{ name: '委托方(合同甲方)信息',id: 'outside3' },
								// { name: '任务信息',id: 'outside4' },
								{ name: '收付款计划',id: 'outside5' },
								{ name: '申请记录',id: 'outside6' },
							]
							this.childFields2 = {
								'名称': 'gsdaId_dictText',
								'是否为付款单位': 'isFk_dictText',
							}
							this.childFields3 = {
								'名称': 'khdaId_dictText',
								'是否为收款单位': 'isSk_dictText',
							}
							this.getChildren(getChildrenListTrustee,'childSource3',res.result.id) // 受托方信息子表
							this.getChildren(getChildrenListEntrust,'childSource2',res.result.id) // 委托方信息子表
						}
						var cust_lxr = await 'erp_omc_customer_manager_contact,lxr,id,del_flag=0 and main_id=\'' + this.detailData.yzdw + '\''
						initDictOptions(cust_lxr).then((res) => {
						  if (res.success) {
						    this.$set(this.dictOptions, 'contacts', res.result)
						  }
						})
						this.getChildren(getChildrenListPlan,'childSource5',res.result.id) // 收款计划子表
						this.getChildren(getChildrenListClass,'childSource4',res.result.id) // 任务信息子表
						this.timer = setTimeout(() => {
							clearTimeout(this.timer)
							this.timer = null
							this.$nextTick(() => {
								uni.createSelectorQuery().select('#'+this.uId).boundingClientRect(data => {
									this.maxHeight = data.height
								}).exec();
							})
						}, 300)
					} else {
						this.$refs.uToast.show({
							message: res.message,
							type: 'error'
						})
					}
				})
			},
			// 获取子表数据
			getChildren(promiseUrl,key,id){
				var params = { mainId: id }
				promiseUrl(params).then(res => {
					if (res.success) {
						this[key]= res.result.records || res.result
					} else {
						this.$refs.uToast.show({
							message: res.message,
							type: 'error'
						})
					}
				})
			},
			// 获取申请记录列表
			getApplicationRecord (htbh) {
				var param = {
					pageSize: 100,
					column: 'createTime',
					order: 'desc',
					htbh
				}
				http.get('/api/erp/omc/contractmanager/erpOmcContractManager/list', param).then(async res =>{
					if (res.success) {
						this.childSource6 = res.result.records || res.result
					}
				})
			},
			
			
			// 点击tabs
			onTabClick (item) {
				uni.createSelectorQuery().in(this).select(`#${item.id}`).boundingClientRect(data => {
					uni.pageScrollTo({
						scrollTop:data.top + this.scrollTop - 54,
						duration: 150
					})
				 }).exec();
			},
			
			// 点击项目名称
			onClickProjectName (item) {
				uni.redirectTo({
					url: '/pages/reportFilesList/erpProjectReportListDetail?id=' + item.xmmc
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
@import "@/pages/synergy/common/action.scss";
.task_lists{
	padding: 20rpx 20rpx 0;
}

.flow_right{
	display: flex;
	align-items: center;
	image{
		width: 40rpx;
		height: 40rpx;
	}
	text{
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #1E6FFF;
		line-height: 40rpx;
		margin-left: 4rpx;
	}
}

.task_bottom{
	display: flex;
	align-items: center;
	padding: 20rpx 0 20rpx 52rpx;
	background-color: #FFFFFF;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 10000;
	.task_bottom_write{
		display: flex;
		align-items: center;
		image{
			width: 48rpx;
			height: 48rpx;
			margin-right: 8rpx;
		}
		text{
			font-size: 14px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #7F7F7F;
			line-height: 40rpx;
		}
	}
	.refuse{
		width: 168rpx;
		height: 90rpx;
		line-height: 90rpx;
		background: rgba(0,0,0,0.0500);
		border-radius: 10rpx;
		margin: 0 16rpx 0 52rpx;
		font-size: 17px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(0,0,0,0.5000);
		text-align: center;
	}
	.agree{
		width: 318rpx;
		height: 90rpx;
		line-height: 90rpx;
		background: #1E6FFF;
		border-radius: 10rpx;
		font-size: 17px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
	}
}
</style>
